import { Badge } from '/components/badge'

# Methods

This section introduces the methods of Umo Editor, through which you can perform routine operations on Umo Editor. You can visit https://demo.umodoc.com/editor?pane=events&lang=en-US, click the corresponding method buttons to see how to use the methods.

## Example

```vue
<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
  <button @click="getOptions">Get Configuration</button>
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoEditor } from '@umoteam/editor';

  const editorRef = ref(null);
  const options = ref({
    // Configuration options
    // ...
  })

  const getOptions = () => {
    const options = editorRef.value.getOptions();
    console.log(options);
  }
</script>
```

## Method Description

### getOptions

**Description**: Retrieves the configuration of Umo Editor.

**Parameters**: None

**Return Value**: `Object` , containing the configuration of Umo Editor.

### setOptions

**Description**: Sets the configuration of Umo Editor.

**Parameters**: `Object` , containing the configuration of Umo Editor.

**Return Value**: `Object` , containing the configuration of Umo Editor.

### setToolbar

**Description**: Sets the toolbar type of Umo Editor.

**Parameters**: `{ mode, show `}

- `mode`: String, toolbar type, with options `robbin`, `classic`.
- `show`: Boolean, whether to show the toolbar.

**Return Value**: None.

### setPage 

**Description**: Sets the page information of Umo Editor.

**Parameters**: `Object` , containing the page information to be set.

- `size`: String, page size, should be the `label` value provided in `dicts.pageSizes`, such as A4.
- `orientation`: String, page orientation, options are `portrait`, `landscape`.
- `background`: String, page background, a valid [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).

**Return Value**: None.

### setWatermark

**Description**: Sets the watermark information of Umo Editor.

**Parameters**: `Object` , containing the watermark information to be set.

- `type`: String, watermark type, options are `compact`, `spacious`.
- `alpha`: Number, watermark transparency, options are 0-1.
- `fontColor`: String, font color, a valid [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
- `fontSize`: Number, font size in pixels.
- `fontFamily`: String, font family, a valid [CSS font-family value](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family).
- `fontWeight`: String, font weight, options are `normal`, `bold`, `bolder`.
- `text`: String, watermark text, recommended to be no more than 30 characters.

**Return Value**: None.

### setDocument

**Description**: Sets the document information of Umo Editor.

**Parameters**: `Object` , containing the document information to be set.

- `title`: String, document title.
- `bubbleMenu`: Boolean, whether to enable the bubble menu.
- `blockMenu`: Boolean, whether to enable the block menu.
- `markdown`: Boolean, whether to enable Markdown syntax.
- `spellcheck`: Boolean, whether to enable browser spell check.

**Return Value**: None.

### setContent

**Description**: Sets the content of Umo Editor.

**Parameters**: 

- `content` : Valid HTML format or other valid [Tiptap document formats](https://tiptap.dev/docs/editor/guide/output).
- `options` :  // New in v2.2.0
  - `emitUpdate`: `true`, By default, it doesn’t trigger the update event. Passing doesn’t prevent triggering the update event.
  - `focusPosition`: Focus position, possible values are: 'start' | 'end' | 'all' | number | boolean | null (false).
  - `focusOptions`: `{ scrollIntoView: true }`.

**Return Value**: None.

### setLocale 

**Description**: Sets the display language of Umo Editor. <Badge theme="success">New in v2.0.0</Badge>

**Parameters**: `zh-CN` or `en-US`.

**Return Value**: None.


### setTheme 

**Description**：Sets the theme of Umo Editor. <Badge theme="success">New in v2.1.0</Badge>

**Parameters**：`light` 、 `dark` 、 `auto`.

**Return Value**：None.

### getPage 

**Description**：Get Umo Editor's page configuration. <Badge theme="success">New in v5.0.0</Badge>

**Parameters**：None.

**Return Value**：Page configuration.

### getContent

**Description**: Retrieves the content of Umo Editor.

**Parameters**: String, options are `html`, `json`, `text` .

**Return Value**: `html` , `json` , `text` .

### getContentExcerpt

**Description**: Retrieves a summary of the content in Umo Editor.

**Parameters**:

- `charLimit`: Number, summary length, default is 100 characters.
- `more`: String, summary ending, default is ` ...`.

**Return Value**: Document summary.

### getHTML

**Description**: Retrieves the HTML content of Umo Editor.

**Parameters**: None.

**Return Value**: `html`.

### getJSON

**Description**: Retrieves the JSON content of Umo Editor.

**Parameters**: None.

**Return Value**: `JSON`.

### getText

**Description**: Retrieves the text content of Umo Editor.

**Parameters**: None.

**Return Value**: Text.

### getImage

**Description**: Retrieves a screenshot of the page in Umo Editor.

**Parameters**: String, options are `blob` , `jpeg` , `png` .

**Return Value**: Image information.

### saveContent

**Description**: Saves the content of Umo Editor.

**Parameters**: `Boolean`, whether to display the save success message.

**Return Value**: None.

### getEditor

**Description**: Retrieves the Vue instance of the Editor.

**Parameters**: None.

**Return Value**: The Vue instance of the Tiptap Editor.

### useEditor

**Description**: Retrieves the instance of the Editor. <Badge theme="success">New in v4.6.0</Badge>

**Parameters**: None.

**Return Value**: The Tiptap Editor instance.


### getTableOfContents

**Description**：Get the page Table of Contents. More information about the page outline can be obtained by first getting the editor instance through `getEditor()`, and then accessing `editor.storage.tableOfContents`. <Badge theme="success">New in v3.0.0</Badge>

**Parameters**：None.

**Return Value**：
```js
[
  {
    dom: HTMLElement // the HTML element for this anchor
    editor: Editor // the editor
    id: String // the node id
    isActive: Boolean // whether this anchor is currently active
    isScrolledOver: Number // whether this anchor was already scrolled over
    itemIndex: Number // the index of the item on it's current level
    level: Number // the current level of the item - this could be different from the actual anchor level and is used to render the hierarchy from high to low headlines
    node: Node // the ProseMirror node for this anchor
    originalLevel: Number // the actual level
    pos: Number // the position of the anchor node
    textContent: String // the text content of the anchor
  }
]
```

### getSelectionText 

**Description**: Gets the content of the currently selected text. <Badge theme="success">New in v3.0.0</Badge>

**Parameters**: None.

**Return Value**: None

### getSelectionNode

**Description**: Gets information about the currently selected node. <Badge theme="success">New in v3.0.0</Badge>

**Parameters**: None.

**Return Value**: Tiptap Node.

### setCurrentNodeSelection

**Description**: Selects the entire node at the current focus position, such as selecting the entire table when the cursor is in a cell within a table. <Badge theme="success">New in v3.1.0</Badge>

**Parameters**: None.

**Return Value**: None.

### deleteSelectionNode

**Description**: Deletes the currently selected node. <Badge theme="success">New in v3.0.0</Badge>

**Parameters**: None.

**Return Value**: None

### getLocale 

**Description**: Returns the display language of Umo Editor. <Badge theme="success">New in v2.0.0</Badge>

**Parameters**: None.

**Return Value**: `zh-CN` or `en-US`.

### getI18n 

**Description**: Returns the [`vue-i18n`](https://vue-i18n.intlify.dev/guide/introduction.html) instance. <Badge theme="success">New in v2.0.0</Badge>

**Parameters**: None.

**Return Value**: `vue-i18n`.

### setReadOnly

**Description**: Sets the read-only state of Umo Editor.

**Parameters**: Boolean, whether it is read-only.

**Return Value**: None.

### print

**Description**: Prints the page. <Badge theme="success">New in v1.1.0</Badge>

**Parameters**: None.

**Return Value**: None.

### focus

**Description**: Gives focus to Umo Editor.

**Parameters**: 

- `position` : 'start' | 'end' | 'all' | number | boolean | null (false)
- `options` : \{ scrollIntoView: boolean \} // New in v2.2.0

**Return Value**: None.

### blur

**Description**: Removes focus from Umo Editor.

**Parameters**: None.

**Return Value**: None.

## Additional Methods

The Umo Editor is implemented based on [Tiptap](https://tiptap.dev/). For more internal methods of Tiptap, please refer to the [Tiptap Editor](./tiptap).
